/**
 * 主题管理服务
 * 管理应用的主题切换功能
 */

import { ref, watch } from 'vue';

// 主题类型
export const ThemeType = {
  LIGHT: 'light',
  DARK: 'dark'
};

// 主题CSS变量映射
const themeVariables = {
  [ThemeType.LIGHT]: {
    '--bg-color': '#ffffff',
    '--bg-color-secondary': '#f5f7fa',
    '--text-color': '#303133',
    '--text-color-secondary': '#606266',
    '--border-color': '#e4e7ed',
    '--header-bg-color': '#f5f7fa',
    '--sidebar-bg-color': '#fcfcfc',
    '--canvas-bg-color': '#f0f2f5',
    '--component-bg-color': '#ffffff',
    '--hover-color': '#ecf5ff',
    '--active-color': '#409eff',
    '--panel-shadow': '0 2px 12px 0 rgba(0, 0, 0, 0.1)',
    '--grid-color': '#e8e8e8'
  },
  [ThemeType.DARK]: {
    '--bg-color': '#252525',
    '--bg-color-secondary': '#1e1e1e',
    '--text-color': '#e1e1e1',
    '--text-color-secondary': '#aaaaaa',
    '--border-color': '#494949',
    '--header-bg-color': '#1e1e1e',
    '--sidebar-bg-color': '#252525',
    '--canvas-bg-color': '#1a1a1a',
    '--component-bg-color': '#303030',
    '--hover-color': '#363636',
    '--active-color': '#409eff',
    '--panel-shadow': '0 2px 12px 0 rgba(0, 0, 0, 0.3)',
    '--grid-color': '#333333'
  }
};

// 创建主题状态
const currentTheme = ref(
  localStorage.getItem('app-theme') || ThemeType.LIGHT
);

// 应用主题到文档
const applyTheme = (theme) => {
  const root = document.documentElement;
  const variables = themeVariables[theme];
  
  // 应用CSS变量
  for (const [key, value] of Object.entries(variables)) {
    root.style.setProperty(key, value);
  }
  
  // 更新body类名
  document.body.classList.remove('theme-light', 'theme-dark');
  document.body.classList.add(`theme-${theme}`);
  
  // 同步Element Plus主题
  const isDark = theme === ThemeType.DARK;
  document.documentElement.classList.toggle('dark', isDark);
  
  // 存储用户偏好
  localStorage.setItem('app-theme', theme);
  
  // 更新状态
  currentTheme.value = theme;
};

// 切换主题
const toggleTheme = () => {
  const newTheme = currentTheme.value === ThemeType.LIGHT 
    ? ThemeType.DARK 
    : ThemeType.LIGHT;
  
  applyTheme(newTheme);
  return newTheme;
};

// 初始化主题
const initTheme = () => {
  applyTheme(currentTheme.value);
};

// 导出服务
export default {
  currentTheme,
  initTheme,
  applyTheme,
  toggleTheme,
  ThemeType
}; 